<template>
	<div class="box" style="width: 100%;height: 430px;float: left;margin: 10px 0;">
	 <div class="kb" style="margin-right: 0px;width: 48.5%;float: left;height: 430px;">
				<el-card class="box-card" style='border-top: 3px solid deepskyblue;'>
					<div slot="header" class="clearfix">
						<i class="el-icon-date"></i>
						<span>今日课表&nbsp;&nbsp;<i class="el-icon-refresh" @click="kb()"></i></span>
						<router-link to="/educa/course">
							<el-button style="float: right; padding: 3px 0" type="text">更多课程安排</el-button>
						</router-link>
					</div>
					<template>
						<el-table :data="dataList" stripe style="width: 100%">
							<el-table-column align="center" prop="bjmc" label="班级名称" width="120">
							</el-table-column>
							<el-table-column align="center" prop="jsmc" label="教室名称" width="80">
							</el-table-column>
							<el-table-column align="center" prop="sjd" label="时间段" width="120">
								<template scope="scope">
									<div slot="reference" :style="tableCellControl(scope)">
										{{ scope.row[scope.column.property] }}
									</div>
								</template>
							</el-table-column>
							<el-table-column align="center" prop="ls" label="上课老师" width="">
							</el-table-column>
							<el-table-column align="center" prop="skzt" label="上课状态" width="">
							</el-table-column>
						</el-table>
						<!-- 分页查询区域 -->
						<!--<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageindex" :page-sizes="pagesizes" :page-size="pagesize" :layout="layout" :total="total" class="class-page">
						</el-pagination>-->
					</template>
				</el-card>

			</div>
			<div class="d1" style="margin-left: 0; width: 48.5%;float: right;height: 430px;">
				<el-card class="box-card" style='border-top: 3px solid deepskyblue;'>
					<div slot="header" class="clearfix">
						<i class="el-icon-search"></i>
						<span>缺勤补课记录&nbsp;&nbsp;<i class="el-icon-refresh" @click="qqjl()"></i></span>
						<router-link to="/educa/bklist">
							<el-button style="float: right; padding: 3px 0" type="text">补课详情</el-button>
						</router-link>
						<!-- <router-link to="/educa/check">
							<el-button style="float: right; padding: 3px 0" type="text">缺勤详情</el-button>
						</router-link> -->
					</div>
					<template>
						<el-table :data="qqjldataList" stripe style="width: 100%">
							<el-table-column align="center" prop="xs" label="学生" width="100">
								<template scope="scope">	
									  <div slot="reference">
				                        <div v-if="scope.column.property == 'xs'" @click="componentsShow('info',scope)">
				                            <img
				                            :src="scope.row.xb == '男' ? $store.state.sexImg.boy : $store.state.sexImg.girl"
				                            style="width:20px;vertical-align:middle; float: left;"
				                            v-if="scope.column.property == 'xs'">
				                            <span style="vertical-align:middle;">{{ scope.row[scope.column.property] }}</span>
				                        </div>
				                      </div>
							        </template>
							</el-table-column>
							<el-table-column align="center" prop="bjmc" label="班级名称" width="100">
							</el-table-column>
							<el-table-column align="center" prop="day" label="day" width="60">
							</el-table-column>
							<el-table-column align="center" prop="sj" label="考勤时间" width="">
							</el-table-column>
							<el-table-column  fixed="right" align="center"  label="操作"  width="100px">
						    
				              <template scope="scope" >
				                  <!-- <el-button size="small" type="primary" v-if="scope.row.zt=='未安排补课'"  @click="componentsShow('bkap',scope)">补课</el-button> -->
				                  <el-button size="small" type="primary" v-if="scope.row.zt=='未安排补课'"  @click="componentsShow('bkap',scope)">补课</el-button>
				                  <el-button size="small" type="primary" disabled v-if="scope.row.zt=='已安排补课'" >{{scope.row.zt}}</el-button>
								  <el-button size="small" type="primary" disabled v-if="scope.row.zt=='已补课'" >补课完成</el-button>
				              </template>
				            </el-table-column>
						</el-table>
						<!-- 分页查询区域 -->
						<!--<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page.sync="pageindex1" :page-sizes="pagesizes1" :page-size="pagesize1" :layout="layout" :total="total1" class="class-page">
						</el-pagination>-->
						<BkapComponent v-if="portComponents.bkap.toggle" @close="componentsHide" :params="portComponents.bkap.params"></BkapComponent>
                        <infoComponent v-if="portComponents.info.toggle" @close="componentsHide" :params="portComponents.info.params"></infoComponent>
					</template>
				</el-card>

			</div>
			</div>
</template>
<script type="text/javascript">
//	import Homeysbjlist from '../../view/admin/yushebjManage/add'
import { mapState } from 'vuex'
import LoadingComponent from 'components/loading'
import BkapComponent from './buke/bkap'
import InfoComponent from '../../view/educa/classManage/student/info'
	export default {
		components: { BkapComponent ,InfoComponent},
		data() {
			return {
				toggle: false,
				dataList: [],
				qqjldataList: [],
				layout: 'total, sizes, prev, pager, next, jumper', //组件布局
				pageindex: 1, //当前分页页码
				pagesizes: [4], //显示个数的选择器选项
				pagesize: 4, //每页显示条目数
				total: 0, //总条数

				layout: 'total, sizes, prev, pager, next, jumper', //组件布局
				pageindex1: 1, //当前分页页码
				pagesizes1: [4], //显示个数的选择器选项
				pagesize1: 4, //每页显示条目数
				total1: 0, //总条数
				portComponents : {
					bkap: {
							type: 'bkap',
							toggle: false,
							params: '',
							data: {}
					},
					info: {
							type: 'info',
							toggle: false,
							params: '',
							data: {}
					},
				}
			}
		},
		created() {
		   this.kb();
		   this.qqjl();
		},
		methods: {
			tableCellControl(scope) { //表格单元格控制CSS样式
				// console.log(scope)
				if(scope.column.property == "zt") {
					return {
						color: "green",
					}
				} else {
					return {
						color: "red",
					}
				}
			},
			kb() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.axios.get(this.$store.state.api + 'pk/sylist', {
					params: {
						lsid: logininfo.id + '',
						xxid: logininfo.xxid,
						pageindex: this.pageindex,
						pagesize: this.pagesize
					}
				}).then(res => {
					console.log(res,'dsadasdsadasdsadsa')
					let data = res.data.data;
					let list = data.list;
					this.total = data.totalPage;
					this.dataList = list;
				}).catch(res => {
					console.log(res)
				})
			},
			handleSizeChange(val) { //每页显示条数触发事件
				this.pagesize = val;
				this.pageindex = 1;
				this.kb();
			},
			handleCurrentChange(val) { //分页触发事件
				this.kb();
			},
			qqjl() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.axios.get(this.$store.state.api + 'kqjl/sylist', {
					params: {
						lsid: logininfo.id,
					    xxid: logininfo.xxid,
						pageindex: this.pageindex1,
						pagesize: this.pagesize1
					}
				}).then(res => {
					console.log(res)
					console.log(12121)
					let data = res.data.data;
					let list = data.list;
					this.total1 = data.totalPage;
					this.qqjldataList = list;
				}).catch(res => {
					console.log(res)
				})
			},
			handleSizeChange1(val) { //每页显示条数触发事件
				this.pagesize1 = val;
				this.pageindex1 = 1;
				this.qqjl();
			},
			handleCurrentChange1(val) { //分页触发事件
				this.qqjl();
			},
			componentsShow (type,data) { //显示组件
					console.log(type,data)
					for ( let i in this.portComponents ) {
							if (type == this.portComponents[i].type) {
									this.portComponents[i].toggle = true;
									this.portComponents[i].params = data;
									if (this.portComponents[i].data.type == 'single') {
											this.portComponents[i].data.index = data.row.id
									}else if(this.portComponents[i].data.type == 'multiple'){
											this.portComponents[i].data.index = this.multipleDelNum;
									}else{
											return;
									}
									return;
							}
					}
			},
			componentsHide (setting) { //关闭组件
					console.log(setting)
					this.qqjl();
					for ( let i in this.portComponents ) {
							if (setting.type == this.portComponents[i].type) {
									this.portComponents[i].toggle = false;
									if (!setting.cancel) {
										 this.search();
									}
									return;
							}
					}
			}
		}
	}
</script>
<style lang="less" scoped>
.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 100%;
		height: 100%;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		/*    line-height: 280px;*/
		margin: 0;
		text-align: center;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: white;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: lightyellow;
	}

	.class-page {
		margin-top: 5px;
	}
	/*日历*/

	#calendar {
		width: 95%;
		margin: 0 auto;
		box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	}

	.month {
		width: 100%;
		background: #00B8EC;
	}

	.month ul {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
	}

	.year-month {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	.year-month:hover {
		background: rgba(150, 2, 12, 0.1);
	}

	.choose-year {
		padding-left: 20px;
		padding-right: 20px;
	}

	.choose-month {
		text-align: center;
		font-size: 1.5rem;
	}

	.arrow {
		padding: 30px;
	}

	.arrow:hover {
		background: rgba(100, 2, 12, 0.1);
	}

	.month ul li {
		color: white;
		font-size: 20px;
		text-transform: uppercase;
		letter-spacing: 3px;
	}

	.weekdays {
		margin: 0;
		padding: 10px 0;
		background-color: #00B8EC;
		display: flex;
		flex-wrap: wrap;
		color: #FFFFFF;
		justify-content: space-around;
	}

	.weekdays li {
		display: inline-block;
		width: 13.6%;
		text-align: center;
	}

	.days {
		padding: 0;
		background: #FFFFFF;
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.days li {
		list-style-type: none;
		display: inline-block;
		width: 14.2%;
		text-align: center;
		padding-bottom: 15px;
		padding-top: 15px;
		font-size: 1rem;
		color: #000;
	}

	.days li .active {
		padding: 6px 10px;
		border-radius: 50%;
		background: #00B8EC;
		color: #fff;
	}

	.days li .other-month {
		padding: 5px;
		color: gainsboro;
	}

	.days li:hover {
		background: #e1e1e1;
	}
</style>
